The HTML聽![]()
聽tag plays a important role in enriching web content by embedding images into a webpage. This tag primarily uses the聽src聽attribute to define the URL of the image file. Additionally, it supports a variety of optional attributes such as聽alt聽for alternative text, and聽width/height聽to specify the dimensions of the image.
In modern web development practices, images are not directly embedded into a webpage. Instead, the聽![]()
聽tag is used to create a placeholder for the image, linking it to the webpage and thereby optimizing the website performance.
Syntax :聽![]()
HTML image Tag AttributesAttributeDescriptionsrcSpecifies the path to the image.altProvides alternate text for the image, useful for informing users about the image and displaying in case of network issues.crossoriginAllows importing images from third-party sites with cross-origin access for use with canvas.heightSpecifies the height of the image.widthSpecifies the width of the image.ismapSpecifies an image as a server-side image map.loadingSpecifies whether a browser should defer loading of images until certain conditions are met or load an image immediately.longdescSpecifies a URL to a detailed description of an image.referrerpolicySpecifies which referrer information to use when fetching an image (e.g., no-referrer, no-referrer-when-downgrade, origin).sizeSpecifies image sizes for different page layouts.srcsetSpecifies a list of image files to use in different situations.usemapSpecifies an image as a client-side image map.Example 1: The implementation of the ![]()
tag along with src, width, height, and alt attributes.
HTMLGeeksforGeeks logoOutput:
HTML img tag output
Explanation:In the above example The ![]()
tag’s src attribute specifies the image’s source location.The width and height attributes define the image’s dimensions.The alt attribute provides alternative text for screen readers and in case the image fails to load.Example 2: The implementation of the style attribute to add a border to the image.
HTMLGeeksforGeeks logoOutput:
HTML img tag output
Explanation:In the above exmaple The ![]()
tag is utilized to include an image in the HTML document.Width and height attributes are specified to define the dimensions of the image.An alt attribute is provided for accessibility, describing the image content for users who cannot view it visually.Supported Browsers:聽
Google Chrome 1 Edge 12 Firefox 1Opera 15Safari 1ConclusionIn conclusion, the HTML聽![]()
聽tag is an essential tool for incorporating images into a webpage. It mandates the use of the聽src聽attribute to identify the image file鈥檚 URL, while also offering optional attributes such as聽alt,聽width, and聽height聽to enhance the user experience and accessibility of the webpage.
M
Mandeep_Sheoran
ImprovePrevious ArticleHTML TagNext ArticleHTML input Tag